<template>
    <div>
        <div class="" style="position:fixed;top:0;bottom:0;right:0;left:0;overflow: hidden">
            <div class="login-bgimg">
                <div class="login-title items-center">
                    <div class="color-text-theme">
                    </div>
                </div>
            </div>

            <div class="login-outlineimg">
            </div>
        </div>
        <!--<div class="loginBoxLayout">-->
        <div class="loginBoxLayout">

            <div class="loginBox">
                <div class="d-flex align-items-center mb-4">
                    <i class="iconfont icon-yinqialogo text-size-60 text-primary mr-3"></i>
                    <div class="text-size-30 font-weight-bold">银洽延保系统</div>
                </div>
                <a-form
                        id="components-form-demo-normal-login"
                        :form="form"
                        class="login-form"
                        style="margin-bottom:42px;"
                >
                    <!--18953206810-->
                    <a-form-item>
                        <a-input
                                v-decorator="[ 'username', {initialValue: '', rules: [{ required: true, message: '请输入手机号!' }] }, ]"
                                placeholder="手机号">
                            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input
                                v-decorator="['password', {initialValue: '',rules: [{ required: true, message: '请输入密码!' }] }, ]"
                                type="password"
                                placeholder="密码"
                        >
                            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" html-type="submit" class="login-form-button" @click="handleSubmit()"
                                  :loading="loading">
                            登 录
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>

        </div>
    </div>

</template>

<script>
    import {login} from "@/common/api.js"

    export default {
        data() {
            return {
                form: this.$form.createForm(this, {name: 'horizontal_login'}),
                loading: false,
            };
        },
        methods: {

            handleSubmit() {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true;

                        this.$store.commit("loginOut");
                        login(values).then((rep) => {
                            if (rep.code == 1) {
                                this.$store.commit("loginIn", rep.result);
                                this.$router.push("/home");

                            }
                        }, (error) => {
                            console.log(error)
                        }).finally(() => {
                            this.loading = false;
                        })
                    }
                });
            },
        },
    };
</script>
<style>
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }

    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }

    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }

    .loginBoxLayout {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 54%;
        display: flex;
        justify-content: start;
        align-items: center;
        z-index: 9;
    }

    .loginBox {
        width: 360px;
        padding: 30px 30px 10px 30px;
        border-radius: 4px;
        transition: all 0.2s ease;
        background-color: white;
        border:1px solid #eee;

    }

    .login-bgimg {
        position: absolute;
        width: 1920px;
        height: 344px;
        overflow: hidden;
        /*background-image: url('../../assets/img/loginbg.png');*/
        background-position: center;
        background-size: 1920px auto;
        background-repeat: no-repeat;
        /*background-color: #eeeff1;*/
        background-color: #eeeff1;

        top: 50%;
        margin-top: -172px;
        left: 50%;
        margin-left: -1100px;
        z-index: 2;
    }

    .login-outlineimg {
        position: absolute;
        width: 1920px;
        height: 895px;
        overflow: hidden;
        /*background-image: url('../../assets/img/outline.png');*/
        background-position: center;
        background-size: 1920px auto;
        background-repeat: no-repeat;
        background-color: white;
        top: 50%;
        margin-top: -446px;
        left: 50%;
        margin-left: -960px;
        z-index: 1;
    }

</style>
